<template>



    <el-button type="text" style="margin-left: 16px" @click="this.$router.push('/ordermgr');">
      返回
    </el-button>

  <el-button  type="primary"  @click="centerDialogVisible = true">
    查询
  </el-button>

  <el-dialog v-model="centerDialogVisible" title="查询页表" width="500" center>
    <span>
       <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="订单ID">
      <el-input v-model="form.oid" />
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="form.ostate" placeholder="是否完成出库">
        <el-option label="已完成" value="1" />
        <el-option label="待处理" value="0" />
      </el-select>
    </el-form-item>
    <el-form-item label="订购日期">
      <el-col :span="11">
          <el-date-picker
              v-model="form.orderDate"
              type="date"
              placeholder="日期"
              style="width: 100%"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
    />
      </el-col>
    </el-form-item>

     <el-form-item label="业务类型">
      <el-radio-group v-model="form.ostyle">
        <el-radio value="">全部</el-radio>
        <el-radio value="普通业务">普通业务</el-radio>
        <el-radio value="顶级业务">顶级业务</el-radio>
        <el-radio value="高级业务">高级业务</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="订单类型">
      <el-radio-group v-model="form.otype">z
          <el-radio value="">全部</el-radio>
        <el-radio value="线下订单">线下订单</el-radio>
        <el-radio value="网络订单">网络订单</el-radio>
          <el-radio value="电话订单">电话订单</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="订购者">
      <el-input v-model="form.uname" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary"  @click="() => { onSubmit(); centerDialogVisible = false; }">提交</el-button>
      <el-button @click="centerDialogVisible = false">取消</el-button>
    </el-form-item>
  </el-form>
    </span>

  </el-dialog>


  <el-card>
    <el-table :data="orderData" style="width: 100%" stripe>
      <el-table-column prop="oid" label="订单 ID" width="120" sortable></el-table-column>
      <el-table-column
          prop="orderDate"
          label="订单日期"
          width="130"
          sortable
      >
        <template #default="{ row }">
          {{ formatDate(row.orderDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="otype" label="订单类型" width="120"></el-table-column>
      <el-table-column prop="oaction" label="操作" width="120"></el-table-column>
      <el-table-column prop="ostyle" label="样式" width="140"></el-table-column>
      <el-table-column prop="uname" label="用户名" width="120"></el-table-column>
      <el-table-column prop="ostate" label="状态" width="100">
        <template #default="{ row }">
          <span
              :style="{ color: getStateColor(row.ostate) }"
          >{{ getStateText(row.ostate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button size="small" @click="viewOrder(row)">查看</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="example-pagination-block">
      <el-pagination
          layout="prev, pager, next"
          :total="totalItems"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
      />
    </div>
  </el-card>
  <a href="http://127.0.0.1:8080/order/query2">下载</a>

</template>
<script setup>
import { ref, onMounted } from "vue";
import { ArrowLeft } from '@element-plus/icons-vue'
import axios from '@/plugins/axios.js';
import router from "@/router/index.js"; // 确保您正确引入 axios

// 响应式数据
const totalItems = ref(100); // 总项数
const pageSize = ref(10); // 每页显示的项目数量
const currentPage = ref(1); // 当前页码
const centerDialogVisible = ref(false)


import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  oid: '',
  ostate: '',
  orderDate: '',
  otype: '',
  ostyle: '',
  uname: ''
})

const onSubmit = () => {

  console.log('表单提交:', form);
  axios.postJson(`/order/query?currentPage=1&pageSize=10`,form).then(res =>{
    if (res.code === 200) {
      orderData.value = res.data; // 假设这里直接替换了 orderData
      totalItems.value = res.all;
    }else {
      console.error('请求失败:', res.message || '未知错误');
    }
  })
}



//订单详情
const viewOrder = (row) =>{

    // 将 row 对象转换为 JSON 字符串并存储在 sessionStorage 中
    sessionStorage.setItem('orderDetails', JSON.stringify(row.oid));
    // 跳转到 "/orderdetail" 页面
    router.push("/orderDetail")

}



// 获取数据函数
const fetchData = async (page) => {

  axios.postJson(`/order/query?currentPage=${page}&pageSize=${pageSize.value}`,form).then(res =>{
    if (res.code === 200) {
      orderData.value = res.data; // 假设这里直接替换了 orderData
      totalItems.value = res.all;
    }else {
      console.error('请求失败:', res.message || '未知错误');
    }
  })

};

// 页码变化时触发
const handlePageChange = (newPage) => {
  currentPage.value = newPage; // 更新当前页面
  fetchData(newPage); // 获取新页面的数据
};

// 初始化数据
onMounted(() => {
  fetchData(currentPage.value);
});







// 响应式数据
const orderData = ref([
  {
    "oid": "暂无数据",
    "orderDate": "0",
    "otype": "暂无数据",
    "oaction": "暂无数据",
    "ostyle": "暂无数据",
    "ostate": "0",
    "uname": "暂无数据",
    "ucount": "暂无数据",
    "uphone": "28-291-2285",
    "uzid": 139727,
    "area": "成都市",
    "place": "锦江区红星路三段661号",
    "way": "顺丰",
    "fire": "41",
    "payway": "支付宝",
    "mail": "xiaot@mail.com"
  }
  // 可以添加更多的数据
]);


// 获取数据
// onMounted(() => {
//
//   axios.postJson("/order/query?currentPage=1&pageSize=3",param).then(res =>{
//     if (res.code === 200) {
//       orderData.value = res.data; // 假设这里直接替换了 orderData
//     }else {
//       console.error('请求失败:', res.message || '未知错误');
//     }
//   })
//
// });

// 方法
const formatDate = (dateString) => {
  const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
  return new Date(dateString).toLocaleDateString('zh-CN', options);
};

const getStateText = (state) => {
  switch (state) {
    case '0': return '待处理';
    case '1': return '已完成';
    default: return '未知状态';
  }
};

const getStateColor = (state) => {
  switch (state) {
    case '0': return 'orange'; // 待处理
    case '1': return 'green'; // 已完成
    case '2': return 'red'; // 已取消
    default: return 'black'; // 默认颜色
  }
};

// 如果需要动态设置行的颜色，可以使用 computed 或者直接在 template 中调用 getStateColor 函数
const stateColor = (row) => {
  return { color: getStateColor(row.ostate) };
};
</script>

<style scoped>
.el-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table td {
  padding: 12px;
}

.el-table .cell {
  text-overflow: ellipsis; /* 显示省略号 */
  overflow: hidden;
  white-space: nowrap;
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
</style>
